<template>
  <div>
    <div class="leftContent d-flex">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :wvalueth="480" :title="'数据管理'">
          <div class="mb-1">
            <p class="font-lan-gray-60">地图管理：</p>
            <el-row :gutter="16">
              <el-col :span="12">
                <coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
              </el-col>
              <el-col :span="12">
                <maptype />
              </el-col>
            </el-row>
          </div>
          <div class="mb-1">
            <p class="font-lan-gray-60">数据来源：</p>
            <scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'"
              :value="'id'" @change="acscaderChange"/>
          </div>
          <div>
            <p class="font-lan-gray-60">数据范围：</p>
            <scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="storage.state.area" :label="'name'"
              :value="'id'" @change="acscaderChange" />
          </div>
        </box>
        <box class="mb-3" :wvalueth="480" :title="'地类数据统计'">
          <decorate1 class="mb-2">
            <div class="d-flex">
              <div class="d-flex ai-center">
                <img :src="area" alt="">
                <span class="font-lan ml-3">总面积：</span>
              </div>
              <div>
                <span class="font-num-l">{{ data.analysisItems.reduce((prev, curr) => {
                  return prev +
                    parseFloat(curr.count)
                }, 0) }}</span>
                <span class="font-lan">亩</span>
              </div>
            </div>
          </decorate1>
          <el-row :gutter="16">
            <el-col :span="12" v-for="(item, index) in data.analysisItems" :key="index">
              <decorate1 class="mb-2">
                <div class="">
                  <div class="d-flex ai-center">
                    <img class="mr-2" :src="item.img" alt="">
                    <div>
                      <p class="font-lan">{{ item.name }}</p>
                      <span class="font-num mr-1">{{ item.count == 0 ? '-': item.count}}</span>
                      <span class="font-lan">{{ item.unit }}</span>
                    </div>
                  </div>
                </div>
              </decorate1>
            </el-col>
          </el-row>
        </box>
        <box :wvalueth="480" :title="'地类数据分布'">
          <lineB :data="{ list: data.analysisItems }" />
        </box>
      </el-scrollbar>
      <div class="icons ml-3">
        <div v-for="(item, index) in data.analysisItems" :key="index" class="iconInfo d-flex ai-center">
          <div class="icon" :style="{backgroundColor:item.background}"></div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :width="480" :title="'土壤地力数据统计'">
          <decorate1 class="mb-3">
            <div class="d-flex">
              <div class="d-flex ai-center">
                <img :src="soillocation" alt="">
                <span class="font-lan ml-3">测土点位：</span>
              </div>
              <div>
                <span class="font-num-l">{{ data.pointList.length }}</span>
                <span class="font-lan">个</span>
              </div>
            </div>
          </decorate1>
          <decorate2 class="mb-2" :title="'土壤数据统计'" />
          <div class="d-flex ai-center mb-2">
            <div class="echart mr-3">
              <pieB :data="{
                showTitle: false,
                color: data.soils.map((item) => item.background),
                list: data.soils
              }" />
            </div>
            <el-row :gutter="12">
              <el-col :span="12" v-for="(item, index) in data.soils" :key="index">
                <div class="d-flex ai-center jc-between mb-2">
                  <div>
                    <span class="chartIcon mr-2" :style="{ background: item.background }"></span>
                    <span class="font-lan">{{ item.name }}</span>
                  </div>
                  <div class="font-lan">{{ item.value }}%</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </box>
        <box :width="480" :title="'测土数据指标'">
          <div class="d-flex mb-3">
						<div :class="['tag', 'mr-3', 'pointer', active == index ? 'active' : '']" v-for="(item, index) in data.tags"
							:key="index" @click="tagsChange(item, index)">
							<p :class="['font-lan','white-nowrap', active == index ? 'text-shadow' : 'font-lan-gray-60']">{{ item.name }}</p>
						</div>
					</div>
          <div>
            <div v-for="(item, index) in data.types" :key="index" class="d-flex ai-center mb-2">
              <img class="mr-2" :src="decorate2" alt="">
              <div class="flex-1 ">
                <div class="d-flex ai-center jc-between">
                  <div>
                    <span class="font-lan">{{ item.name }}</span>
                    <span class="font-lan-gray-60">（{{ item.des }}）</span>
                  </div>
                  <div>
                    <span class="font-lan">{{ item.count }}</span>
                    <span class="font-lan-gray-60-s">个</span>
                  </div>
                </div>
                <div>
                  <el-progress :show-text="false" :percentage="75"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </box>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import pieB from "@/chart/pieChart/pic-bole";
import lineB from "@/chart/lineChart/line-bole";
import pieChartM from "@/chart/pieChart/pie-multi";
import { getCropColor, calculateCenter } from "@/utils/common";
import mapControler from "@/components/mapContainer/mapControler";
import {
  pointStatistics,
  pointList,
  soilFertilityStatistics
} from "@/public/request/http";
import moment from "moment";
import storage from '@/store'
import { useRouter } from 'vue-router';
export default defineComponent({
  components: {
    pieB,
    lineB
    // pieChartM,
  },
  setup() {
    //变量
    // const maxHeight = ref(window.innerHeight-160+'px')
    const maxHeight = computed(() => window.innerHeight - 160 + 'px')
    const router = useRouter()
    const data: any = reactive({
      coverage: [],
      select: null,
      pullDatas: [],
      pullData: [],
      cascader: [],
      adress: [],
      pointList: [],
      soils: [],
      analysisItems: [
        { name: '城镇空间', img: require('@/assets/img/city.png'), unit: '亩', count: 0, background:'#323131' },
        { name: '农业空间', img: require('@/assets/img/agriculture.png'), unit: '亩', count: 0, background:'#56ca56' },
        { name: '生态空间', img: require('@/assets/img/zoology.png'), unit: '亩', count: 0, background:'#e0a53a' },
        { name: '永久基本农田', img: require('@/assets/img/farmland.png'), unit: '亩', count: 0, background:'#93AAF5' }],
      tags: [{ name: '有机质', value: 0 }, { name: '可溶性盐', value: 0 }, { name: '酸碱度', value: 0 }, { name: '有效磷', value: 0 }, { name: '全效钾', value: 0 },],
      types: [
        { name: '一类', value: '60%', des: '1.5~2.0', count: 780 },
        { name: '二类', value: '10%', des: '1.25~1.5', count: 310 },
        { name: '三类', value: '30%', des: '1.0~1.25', count: 100 },
        { name: '四类', value: '30%', des: '0.5~1.0', count: 100 },
        { name: '五类', value: '30%', des: '0.0~0.5', count: 100 }],
    });
    const tableData = ref([]);
    const searchData: any = reactive({
      personConfirmation: null,
      district: [],
      option1: 1,
      option2: 1,
    });
    const farmland = require("@/assets/img/farmland.png");
    const area = require("@/assets/img/area.png");
    const decorate2 = require("@/assets/img/decorate2.png");
    const soillocation = require("@/assets/img/soillocation.png")
    const active = ref(0)

    // 生命周期
    onMounted(async () => {
      getPointStatistics()
      getPointList()
      getSoilFertilityStatistics()
      data.pullDatas = [storage.state.dataSources[router.currentRoute.value.meta.index.toString()]]
      mapControler.mapReSet();
    });

    onUnmounted(() => {
      //
      mapControler.mapReSet();

    });

    //methods
    const getPointStatistics = async () => {
      try {
        let res = await pointStatistics(
          {
            batchId:data.pullData.length>0?data.pullData[data.pullData.length - 1].id:null,
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        res.forEach((item, index) => {
          data.analysisItems[index].count = parseFloat(item.areaSum).toFixed(2)
        })
      } catch (error) {
        return
      }
    }

    const getPointList = async () => {
      mapControler.mapReSet();
      try {
        let res = await pointList(
          {
            batchId:data.pullData.length>0?data.pullData[data.pullData.length - 1].id:null,
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        res.forEach(item=>{
          item.mapPop = 'popWindows7'
          mapControler.drawMark(item.lon,item.lat,require("@/assets/img/soilMark.png"),item)
        })
        data.pointList = res
      } catch (error) {
        return
      }
    }

    const getSoilFertilityStatistics = async () => {
      try {
        let res = await soilFertilityStatistics(
          {
            batchId:data.pullData.length>0?data.pullData[data.pullData.length - 1].id:null,
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        data.soils = res.list.map(item=>{
          return  {
            name:getIndexColor(item.type).name,
            background:getIndexColor(item.type).color,
            value:parseFloat(item.ratio)*100, 
            count:item.areaSum
          }
        })
      } catch (error) {
        return
      }
    }

    const tagsChange = (item, index) => {
      active.value = index
    }

    const slecetChange = (e) => {
      console.log(e);

    }

    const acscaderChange = (e) => {
      getPointStatistics()
      getPointList()
      getSoilFertilityStatistics()
    }

    const getIndexColor = (val) => {
      let obj = {
        color: '',
        name: '',
      }
      switch (val) {
        case '0':
          obj.color = '#F5BA93';
          obj.name = '砂土';
          break;
        case '1':
          obj.color = '#F5E193';
          obj.name = '栗钙土';
          break;
        case '2':
          obj.color = '#93AAF5';
          obj.name = '草甸土';
          break;
        case '3':
          obj.color = '#F5BA93';
          obj.name = '棕钙土';
          break;
        case '4':
          obj.color = '#93DBF5';
          obj.name = '盐碱土';
          break;
        case '5':
          obj.color = '#93AAF5';
          obj.name = '灰漠土';
          break;
        case '6':
          obj.color = '#93AAF5';
          obj.name = '裸岩';
          break;
        default:
          obj.color = '#93F5E1';
          obj.name = '风砂土';
          break;
      }
      return obj
    }

    // return
    return {
      data,
      area,
      decorate2,
      farmland,
      tableData,
      searchData,
      slecetChange,
      acscaderChange,
      moment,
      maxHeight,
      moveTo,
      soillocation,
      active,
      tagsChange,
      storage,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.chartIcon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #93F5E1;
  border-radius: 2px 2px 2px 2px;
}

.tag {
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(82, 147, 204, 0.3) 0%, #5293CC 47%, rgba(82, 147, 204, 0.3) 100%);
  box-shadow: inset 0px 0px 8px 0px rgba(255, 255, 255, 0.16);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 0.3), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0.3)) 1 1;
}

.active {
  position: relative;
  background: linear-gradient(351deg, #CCA352 0%, #F5D493 100%);
  border-radius: 2px 2px 2px 2px;
  border-image: linear-gradient(270deg, rgba(245, 212, 147, 1), rgba(255, 235, 153, 1)) 1 1;
}

.active::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
  background: rgba(245, 196, 98, 0.6);
}

.active::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: rgba(245, 196, 98, 0.6);
}

.text-shadow {
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
}</style>
